<template>
	<view class="wrap">
		<template v-if="vuex_token">
			<!--统计区-->
			<view class="addressClass u-flex u-row-between u-col-top u-p-10" @tap='jumpTo()'>
				<view class="address">
					<text class="title u-p-l-10 u-font-20">共计{{ totalNum(goodsList) }}件商品</text>
					<view class="to" v-if="order.status ===1">
						<!-- <u-icon name="arrow-right" :size="40" color="#999999"></u-icon> -->
						<u-button type="error">去支付</u-button>
					</view>
				</view>
			</view>
			
			<!--收货地址区-->
			<view class="addressClass u-flex u-row-between u-col-top u-p-10" @tap='jumpTo()'>
				<view class="address">
					<text class="title u-p-l-10 u-font-20">{{address.province + address.city +address.county + " " + address.address}}</text>
				</view>
				<view class="phone u-flex u-row-between">
					<text class="phone u-font-16">{{address.name}}</text>
					<text class="phone u-font-16">{{address.phone}}</text>
				</view>
			</view>

			<!--订单区-->
			<view class="cartGoodsList u-p-b-80">
				<view class="cartGoods u-flex u-p-15" v-for="goods in goodsList" :key="goods.id">
					<view class="goodsInfo u-flex u-p-10">
						<view @tap='jump(`/pages/goods/goods-detail/goods-detail`,goods.goods_id)'>
							<u-image border-radius="15" width="200rpx" height="200rpx" :src="goods.goods.cover_url">
							</u-image>
						</view>
						<view class="goodsBaseInfo u-flex u-row-between u-col-top u-p-10">
							<view class="priceNum" @tap='jump(`/pages/goods/goods-detail/goods-detail`,goods.goods_id)'>
								<text class="title u-p-l-10 u-font-32">{{goods.goods.title}}</text>
								<br>
							</view>
							<view class="priceNum u-flex u-row-between">
								<text class="price u-font-34">￥{{goods.goods.price}}</text>
								<view class="u-text-right small">
									<text>✖{{goods.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--订单基本信息区-->
				<view class="u-flex u-flex-wrap u-p-t-80 u-row-center">
					<view class="u-p-20">
						 <text class="title">订单编号:{{order.order_no}}</text>
					</view>
					<view class="u-p-20">
						  <text class="title">下单时间:{{order.created_at}}</text>
					</view>
				</view>
				
				<view class="u-flex u-flex-wrap u-p-t-20 u-row-center">
					<view class="u-p-20">
						  <text class="title">总金额:￥{{order.amount}}</text>
					</view>
				</view>
				<view class="u-flex u-flex-wrap u-p-t-20 u-row-center">
					<view class="u-p-20">
						  <text class="title">快递单号:{{order.express_no}}</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<u-empty text="暂未登入" mode="permission"></u-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressId:0,
				address: {},
				goodsList: [],
				totalPrice: 0,
				order:{}
			}
		},
		async onLoad(option) {
			this.addressId=option.orderId
			const res = await this.$u.api.ordersDetail(this.addressId)
			this.address = res.address
			this.goodsList = res.orderDetails.data
			this.order=res
		},
		methods: {
			// 总件数
			totalNum(item) {
				//无商品的情况
				if (!item) {
					return 0
				}
				//console.log('item',item)
				let num = 0;
				item.map(val => {
					num += val.num;
				});
				return num;
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		min-height: 80vh;

		.empty {
			height: 80vh;
		}

		.loading {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.title,
		.price {
			font-weight: 800;
		}

		.price {
			color: #e83333;
		}

		.cartGoodsList {
			.cartGoods {
				.goodsInfo {
					width: 100%;
					background-color: rgb(251, 250, 251);

					.goodsBaseInfo {
						width: 100%;
						height: 200rpx;
						flex-direction: column;

						.priceNum {
							width: 100%;

						}
					}
				}
			}
		}

		.addressClass {
			width: 100%;
			height: 100rpx;
			flex-direction: column;
			background-color: rgb(251, 250, 251);

			.address {
				width: 50%;
				padding-left: 8rpx;
				padding-right: 5rpx;

				.to {
					position: fixed;
					right: 0;
				}
			}

			.phone {
				width: 50%;
				padding-left: 8rpx;
			}
		}

		.bottomFixed {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
		}

		/*#ifdef H5*/
		.bottomFixed {
			bottom: 100rpx;
		}

		/*#endif*/
		/*#ifdef MP-WEIXIN*/
		.bottomFixed {
			bottom: 0;
			z-index: 99999;
		}

		/*#endif*/

	}
</style>
